<template>
  <div class="cus">
    <div class="cus_box" style="width:1000px;">
      <div class="title">
        <span>已关联设备</span
        ><i @click="$emit('Associated_devices_call')" class="el-icon-close"></i>
      </div>
      <div class="content">
        <div>
          <r-search
            :searchForm="searchForm"
            :searchHandle="searchHandle"
            :searchData="searchData"
          />
          <!--                  <div><el-button size="mini" type="primary">解除关联</el-button></div>-->
          <el-table :data="tableData" height="250" border style="width: 100%;">
            <el-table-column prop="id" label="ID" width="180">
            </el-table-column>
            <el-table-column prop="sn" label="Device Number" width="180">
            </el-table-column>
            <el-table-column prop="deviceName" label="Device Name">
            </el-table-column>
            <el-table-column
              v-if="role == 'platform'"
              prop="operatorName"
              label="Operator"
            >
            </el-table-column>
            <el-table-column
              v-if="role == 'operator'"
              prop="agentName"
              label="Agent"
            >
            </el-table-column>
            <el-table-column prop="address" label="设备地址"> </el-table-column>
            <el-table-column prop="useStatusDes" label="设备Status">
            </el-table-column>
            <el-table-column prop="lastTime" label="Update Time">
            </el-table-column>
            <el-table-column label="Operations" fixed="right">
              <template slot-scope="scope">
                <el-button @click="unBind(scope.row)" size="mini" type="primary"
                  >解除绑定</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Associated_devices",
  data() {
    return {
      searchData: {
        sn: ""
      },
      searchForm: [
        {
          type: "input",
          prop: "sn",
          placeholder: "Device Number",
          width: 150
        },
        {
          type: "select",
          prop: "operatorId",
          placeholder: "Operator",
          width: 150,
          options: [],
          isShow: () => {
            return this.role == "platform" ? true : false;
          }
        },
        {
          type: "select",
          prop: "agentId",
          placeholder: "Agent",
          width: 150,
          isShow: () => {
            return this.role == "operator" ? true : false;
          }
        }
      ],
      searchHandle: [
        {
          label: "Search",
          type: "success",
          icon: "el-icon-search",
          handle: e => this.getData()
        }
      ],

      tableData: []
    };
  },
  props: ["res"],
  computed: {
    role() {
      return sessionStorage.role;
    }
  },
  mounted() {
    this.getData();
    this.get_operator_list();
    this.get_agent_list();
  },
  methods: {
    async getData() {
      const res = await this.apis.device_list({
        pageNum: 1,
        pageSize: 100000,
        deviceType: "3",
        mealId: this.res.id,
        sn: this.searchData.sn,
        operatorId: this.searchData.operatorId,
        agentId: this.searchData.agentId
      });
      const list = res.rows || [];
      list.map(res => {
        if (res.useStatus == 1) {
          res.useStatusDes = "Enable";
        } else if (res.useStatus == 2) {
          res.useStatusDes = "Forbidden";
        }
      });
      this.tableData = list;
    },
    async get_operator_list() {
      const res = await this.apis.operator_list({
        pageNum: 1,
        pageSize: 100000
      });
      const list = res.rows || [];
      let options = [];
      list.map(res => {
        options.push({
          value: res.id,
          label: res.name
        });
      });

      this.searchForm[
        this.labIndex2(this.searchForm, "operatorId")
      ].options = options;
    },
    async get_agent_list() {
      const res = await this.apis.agent_list({
        pageNum: 1,
        pageSize: 100000
      });
      const list = res.rows || [];
      let options = [];
      list.map(res => {
        options.push({
          value: res.id,
          label: res.name
        });
      });
      this.searchForm[
        this.labIndex2(this.searchForm, "agentId")
      ].options = options;
    },
    unBind(row) {
      this.$confirm("Confirm要解除绑定吗?", "Hint", {
        confirmButtonText: "Confirm",
        cancelButtonText: "Cancel",
        type: "warning"
      })
        .then(async () => {
          const res = await this.apis.mealCharge_delDevice({
            id: row.id
          });
          this.$message({
            type: "success",
            message: "Operations Success!"
          });
          this.getData();
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped lang="scss"></style>
